<template>
  <div class="search">
    <van-icon name="arrow-left" @click="gotoBack" />
    <van-search v-model="value" :placeholder="keyword" class="search-input" />
    <span class="search-btn">搜索</span>
  </div>

  <van-tabs v-model:active="activeTab" sticky @change="handleChange">
    <van-tab :title="tab" v-for="(tab, index) in tabsName" :key="index">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <ul class="result">
          <li v-for="item in result" :key="item.iid">
            <img :src="item.img" />

            <div class="title">{{ item.title }}</div>
            <div class="price-collect">
              <div class="price">￥{{ item.price }}</div>
              <div class="collect">{{ item.cfav }}<van-icon name="star-o" /></div>
            </div>
          </li>
        </ul>
      </van-list>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { getSearchGoods } from '@/api/index.js'
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const keyword = computed(() => route.query.q)

const value = computed(() => route.query.q)

const activeTab = ref(0)
const tabsName = ['综合', '销量', '新品', '价格']

const tabsValue = ref(['pop', 'sell', 'new'])

const goodId = ref('') //商品id

const offset = ref(0) //偏移量

const page = ref(1) //页码

const minPrice = ref('') //最低价格
const maxPrice = ref('') //最高价格

const result = ref([])
const loading = ref(false)
const finished = ref(false)

onMounted(async () => {
  loading.value = true
  const res = await getSearchGoods(
    keyword.value,
    goodId.value,
    page.value,
    tabsValue.value[activeTab.value],
    minPrice.value,
    maxPrice.value,
    offset.value,
  )

  console.log('res', res)

  result.value = res.result.wall.docs
  loading.value = false
})

const onLoad = async () => {
  page.value += 1
  loading.value = true

  const res = await getSearchGoods(
    keyword.value,
    goodId.value,
    page.value,
    tabsValue.value[activeTab.value],
    minPrice.value,
    maxPrice.value,
    offset.value,
  )

  if (res.result.wall.docs.length === 0) {
    loading.value = false
    finished.value = true
    return
  }

  result.value.push(...res.result.wall.docs)
  loading.value = false
}

const handleChange = (name) => {
  console.log('name', name)
}

watch(activeTab, async (newVal) => {
  loading.value = true
  page.value = 1
  console.log('activeTab', newVal)

  result.value = []

  const res = await getSearchGoods(
    keyword.value,
    goodId.value,
    page.value,
    tabsValue.value[newVal],
    minPrice.value,
    maxPrice.value,
    offset.value,
  )

  if (res.result.wall.docs.length === 0) {
    loading.value = false
    finished.value = true
    return
  }

  result.value = res.result.wall.docs
  loading.value = false
})

const gotoBack = () => {
  router.push({ path: '/' })
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  // height: 44px;
  background-color: #fff;
  overflow: hidden;
  padding: 0 10px;
  border-top: 1px solid #eee;
  flex-wrap: nowrap;
  white-space: nowrap;

  .search-input {
    width: 100%;
  }

  .search-btn {
    flex: 1;
    margin-left: auto;
    flex-shrink: 0;
  }
}

.result {
  column-count: 2;
  column-gap: 10px;
  box-sizing: border-box;
  padding: 10px;

  li {
    margin-bottom: 5px;
    min-height: 100px;
    display: inline-block;
    width: 100%;
    break-inside: avoid;

    img {
      width: 100%;
      height: auto;
    }

    .title {
      font-size: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      max-width: 100%;
      line-height: 1.4;
    }

    .price-collect {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price {
      }

      .collect {
      }
    }
  }
}
</style>
